<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script>
        function htmlFontSize() {
            var clientWidth = document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth;
            if (clientWidth >= 768 && clientWidth < 960) {
                clientWidth = 812;
            } else if (clientWidth >= 1280) {
                clientWidth = 960;
            }

            document.documentElement.style.fontSize = clientWidth * 1 / 10 + "px";
            return clientWidth * 1 / 10;
        }
        htmlFontSize()

        window.onresize = function () {
            htmlFontSize()
        }
    </script>
    <title>年货节分会场</title>
    <link rel="stylesheet" href="./css/index.min.css">
</head>

<body>
    <header>
        <img src="./img/gd-banner.jpg" alt="">
    </header>
    <nav>
        <ul>
            <li slc='0' class="slect-1 slect-2 slect-3 slect-0 cur">可口可乐</li>
            <li slc='0' class="slect-1 slect-2 slect-3 slect-0 cur">雪碧</li>
            <li slc='0' class="slect-1 slect-2 slect-3 slect-0 cur">美汁源</li>
            <li slc='0' class="slect-1 slect-2 slect-3 slect-0 cur">芬达</li>

            <li slc='1' class="slect-4">加多宝</li>
            
            <li slc='2' class="slect-5">首彩</li>

            <li slc='3' class="slect-7 slect-6 discard">穆斯利安</li>
            <li slc='3' class="slect-7 slect-6 discard">小样</li>

            <li slc='4' class="slect-8 slect-9 slect-10 slect-11">米老头</li>
            <li slc='4' class="slect-8 slect-9 slect-10 slect-11">优乐美</li>
            <li slc='4' class="slect-8 slect-9 slect-10 slect-11">喜之郎</li>
            <li slc='4' class="slect-8 slect-9 slect-10 slect-11">美好时光</li>

            <li slc='5' class="slect-12">盈享</li>

            <li slc='6' class="slect-13">嘉宝</li>

            <li slc='7' class="slect-14 slect-15 slect-16">百年树</li>
            <li slc='7' class="slect-14 slect-15 slect-16">中国仁</li>
            <li slc='7' class="slect-14 slect-15 slect-16">乐方</li>

            <li slc='8' class="slect-17">蒙牛</li>
            
            <li slc='9' class="slect-18">旺旺</li>

            <li slc='10' class="slect-19">雅集</li>

            <li slc='11' class="slect-20">金浩</li>
            
        </ul>
        <span class="nav-more">更多</span>
        
    </nav>
    <div class="wrap">
        <!-- one -->
        <ul class="wrap-title">
                <li>可口可乐</li>
                <li>美汁源</li>
                <li>雪碧</li>
                <li>芬达</li>
        </ul>
        <p class="wrap-info"></p>
        
        <div class="container clearfix"></div>
        <!-- tow -->
        <ul class="wrap-title">
                <li>加多宝</li>                
        </ul>
        <p class="wrap-info"></p>
        
        <div class="container clearfix"></div>
        <!-- three -->
        <ul class="wrap-title three">
            <li>首彩</li>
        </ul>
        <p class="wrap-info"></p>
        
        <div class="container clearfix three"></div>
        <!-- four -->
        <ul class="wrap-title discard">
            <li>穆斯利安</li>
            <li>小样</li>
        </ul>
        <p class="wrap-info discard"></p>
        
        <div class="container discard clearfix"></div>
        <!-- four -->
        <ul class="wrap-title">
            <li>米老头</li>
            <li>优乐美</li>
            <li>喜之郎</li>
            <li>等</li>
        </ul>
        <p class="wrap-info"></p>
        
        <div class="container clearfix"></div>
        <!-- five -->
        <ul class="wrap-title">
            <li>盈享</li>
        </ul>
        <p class="wrap-info"></p>
        
        <div class="container clearfix"></div>
        <!-- siex -->
        <ul class="wrap-title">
            <li>嘉宝</li>
        </ul>
        <p class="wrap-info"></p>
        
        <div class="container clearfix"></div>
        <!-- siex -->
        <ul class="wrap-title">
                <li>百年树</li>
                <li>中国仁</li>
                <li>乐方</li>
            </ul>
            <p class="wrap-info"></p>
            
            <div class="container clearfix"></div>
            <!-- siex -->
        <ul class="wrap-title">
                <li>蒙牛</li>
            </ul>
            <p class="wrap-info"></p>
            
            <div class="container clearfix"></div>
            <!-- siex -->
        <ul class="wrap-title">
                <li>旺旺</li>
            </ul>
            <div class="container clearfix"></div>
            <!-- siex -->
        <ul class="wrap-title">
                <li>雅集</li>
            </ul>
            <p class="wrap-info"></p>
            <div class="container clearfix"></div>
               <!-- siex -->
        <ul class="wrap-title">
                <li>金浩</li>
            </ul>
            <p class="wrap-info"></p>
            <div class="container clearfix"></div>
        <!-- back-top -->
        <div class="wrap-backtop"></div>
    </div>
    <footer>
        <div class="kefu"></div>
    </footer>
    <!-- template -->
    <script type="text/html" id="card-tpl">
        {{each $data}}
        <a class="card C_J_good fl" data-id="{{$value.id}}">
            <img src="{{$value.pic}}" alt="">
            <div class="card-foot">
                <p class="card-foot-title">{{$value.name}}</p>
                <p class="card-foot-old">原价:
                    <del>￥{{$value.price_on_tag}}</del>
                </p>
                <p class="card-foot-new">年货价：￥
                    <i>{{$value.discountPrice}}</i>
                </p>
            </div>
        </a>
        {{/each}}
    </script>
</body>
<script src="../../../js/jquery-1.8.3.min.js"></script>
<script src="../../../js/art-template.js"></script>
<script src="../../../js/login.js"></script>
<script src="../../../js/model.js"></script>
<script src="../../../js/model-citizen.js"></script>
<script class="app-min"></script>

<script>
    (function (window, $, template) {
        var SW = window.screen.width;
        // var HASH = window.location.hash.substring(1);
        var HASH = 'hn';

        console.log(window.location.href);
        var info = {
            hn:[
            [149552,149551,149542,149541,149538,149535,149526,149483,149482,149481,149476,149472,149468,149466,149460,149454,149402,149398],
            [126953,126946,126945],
            [108404,119488,136921,113954],
            [142844,142852],
            [113766,113493,113489,113488,113409,112443,112413,112411,112318,112317,112305,112304,112303],
            [149231,149230,149096],
            [149514,149506,149505,149485,149478,149469,149463,149459,149306],
            [149869,149879,149880,149877,149878,149868,149876,149875,149881],
            [149961,149959,149957,149927,149925,149924,149918,149917,149910],
            [149368,149365,149363,149362,149361,149358,149357,149353,149352,149350,149349,149348,149346],
            [148036,148035,148034,148033,148032,147597],
            [149916,149915,149913,149912,149897,149835]
            ]
        }

        init()

        var infoStr = '集单时间：10月27日-11月1日：下单时间：11月2日；发货时间：下单后7-15天；可口可乐、雪碧、果粒橙、芬达品牌县域合计达到500件起可发货，达到1500件价格更加优惠。年货商品，下单支付成功，非质量问题不退不换。,该品牌年货集单暂未开始 敬请期待。,该品牌年货集单暂未开始，敬请期待。,该品牌年货集单暂未开始，敬请期待。,该品牌年货集单暂未开始，敬请期待。,该品牌年货集单暂未开始，敬请期待。,该品牌年货集单暂未开始，敬请期待。,该品牌年货集单暂未开始，敬请期待。,该品牌年货集单暂未开始，敬请期待。,该品牌年货集单暂未开始，敬请期待。,该品牌年货集单暂未开始，敬请期待。'
        infoStr.split(',').forEach(function (v, i) {
            $('.wrap-info').eq(i).text(v)
        })

        function init() {
            if (SW < 810) {
                $('.app-min').attr('src', "../../../js/app.min.js")
            }
            // if (HASH != 'gd'){
            //     $('.three').css({
            //         'position':'absolute',
            //         'left':'-9000px'
            //     });
            // }
            if(SW>960){
                changeBg(HASH,'-pc')
            }else{
                changeBg(HASH,'')
            }
            setData(info[HASH])

        }

        function changeBg(hash,fix){
            $('body').css({
                'background-image':"url('./img/"+hash+"-bg.jpg')"
            })
            $('header').html('<img src="./img/'+hash+'-banner'+fix+'.jpg" alt="">')
        }

        function sorter(oldArr, newArr) {
            var resArr = [];
            oldArr.forEach(function (oldVal) {
                newArr.forEach(function (newVal) {
                    if (oldVal == newVal.id) {
                        addAttr(newVal, oldVal)
                        resArr.push(newVal);
                    }
                })
            });
            return resArr;
        }

        function addAttr(obj, id) {
            obj.pic = obj.pic.replace('240_240', '800_800');
            obj.screen = window.screen.width;
        }

        function getData(id, index) {
            $.ajax({
                url: 'http://www.cjwsc.com/qcwdProduct/getProductByIds',
                data: {
                    ids: id.join(','),
                    business_type: SW < 960 ? (SW < 810 ? 20 : 50) : 10,
                    client_type: SW < 960 ? (SW < 810 ? 2 : 5) : 1
                },
                dataType: "jsonp",
                jsonp: 'jsonpcallback',
                success: function (res) {
                    res = sorter(id, res.msg)
                    $('.container').eq(index).html(template('card-tpl', res))
                }
            })
        }

        function setData(info) {
            info.forEach(function (v, i) {
                getData(v, i)
            })
        }



        // 设置nav栏选中状态和滚动
        function setNavCur(index) {
            var slect = $('.slect-' + index)
            slect.addClass('cur')
            pageScrollTo(getTitleTop(slect.attr('slc')))
        }


        // 获取title的高度
        function getTitleTop(index) {
            return $('.wrap-title').eq(index).offset().top - $('nav').height()
        }

        // 页面滚动
        function pageScrollTo(size) {
            $('html,body').animate({
                scrollTop: size
            }, 500)
        };

        // 功能
        (function (window, $) {
            var nav = $('nav'),
                navTop = nav.offset().top,
                wrap = $('.wrap');
            // 头顶固定
            $(window).on('scroll', function () {
                if ($(this).scrollTop() > navTop) {
                    nav.css({
                        'position': 'fixed'
                    })
                    wrap.css({
                        'margin-top': nav.height()
                    })
                } else {
                    nav.css({
                        'position': 'static'
                    })
                    wrap.css({
                        'margin-top': 0
                    })
                }
            })

            $('.nav-more').on('click',function(){
                var $this = $(this),navUl = $('nav ul');
                if($this.text()!='收起'){
                    $this.text('收起')
                    navUl.css({
                    height:'auto'
                    })
                    return
                }
                $this.text('更多')
                navUl.css({
                height:$('nav li').height()*4
                })

            })


            // 顶部nav功能区
            $('nav').on('click', 'li', function () {
                var $this = $(this);
                $this.addClass('cur').siblings().removeClass('cur');
                setNavCur($this.index())
            })
            // 返回顶部
            $('.wrap-backtop,.kefu').on('click', function () {
                pageScrollTo(0)
            });
        }(window, $))

    })(window, $, template)
</script>

</html>
